import React ,{ useState } from "react"
import {useHistory} from "react-router-dom"
import styles from "./MyName.module.scss"
import useStore from "../../context/store"
const MyName:React.FC =()=>{
    let history = useHistory()
    let {mine} = useStore()
    const [nickname,setNickname] = useState<string>('')
    function goBack() {
        history.goBack()
    }
    function setMyName(){
        mine.setName(nickname)
    }
    return <div className={styles.wrap}>
          <header className='header'>
            <div className={styles.push} onClick={goBack}>
                {'<'}
            </div>
            <div className={styles.text} >
                昵称
            </div>
        </header>
        <div className={styles.phone}>
            <input type="text" placeholder='请输入昵称' value={nickname} onChange={e=>setNickname(e.target.value)}/>
        </div>
        <div className={styles.setPhone}>
            <button onChange={setMyName}>修改</button>
        </div>
    </div>
}
export default MyName